<template>
  <div class="ui-add">
    <div class="ui-bread_box">新建对比组</div>
    <div class="panel-body">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class>
        <el-row class="bg-purple">
          <el-col :span="8">
            <div class>
              <el-form-item label="对比组名称" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <div class>
              <el-form-item label="appkey" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <div class>
              <el-form-item label="渠道" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <div class="form-add">
          <div class="form-add-left" v-for="(item,j) in ruleForm.callList" :key="item.id">
            <div class="form-add-item">
              <h4 class="form-add-title">配置回调</h4>
              <el-form-item label="回调百分比" :prop="'callList.'+j+'.call_name'" width="100">
                <el-input v-model="item.call_name" style="width:300px"></el-input>
              </el-form-item>
              <el-form-item label="回调百分比" :prop="'callList.'+j+'.percentage'"  width="100">
                <el-input v-model="item.percentage" style="width:300px"></el-input>
              </el-form-item>
              <el-form-item label="回调URL" :prop="'callList.'+j+'.url'" width="100">
                <el-input type="textarea" v-model="item.url" style="width:300px"></el-input>
              </el-form-item>

              <el-form-item label="是否子回调" prop="isChildback">
                <el-radio-group v-model="item.isChildback">
                  <el-radio label="1">是</el-radio>
                  <el-radio label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="是否开启" prop="status">
                <el-radio-group v-model="item.status">
                  <el-radio label="1">是</el-radio>
                  <el-radio label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>

              <div v-if="item.status == '1'">
                <div v-for="(v,i) in item.childCallList" :key="i">
                  <el-form-item
                    :label="'子回调名称'+(i+1)"
                    label-width="100px"
                    :prop="'callList.'+j+'.childCallList.'+i+'.callback_name'"
                    :rules="[{ required: true, message: '子回调名称不能为空',trigger: 'change'}]"
                  >
                    <el-input autocomplete="off" v-model="v.callback_name" style="width:300px"></el-input>
                  </el-form-item>
                  <el-form-item
                    :label="'子回调百分比'+(i+1)"
                    label-width="100px"
                    :prop="'callList.'+j+'.childCallList.'+i+'.percentage'"
                    :rules="[{ required: true, message: '子回调百分比不能为空',trigger: 'change'}]"
                  >
                    <el-input-number
                      v-model="v.percentage"
                      controls-position="right"
                      :precision="2"
                      :step="1"
                      :max="100"
                      :min="0"
                      style="width:300px"
                    ></el-input-number>
                  </el-form-item>
                  <el-form-item
                    :label="'回调RUL'+(i+1)"
                    label-width="100px"
                    :prop="'callList.'+j+'.childCallList.'+i+'.url'"
                    :rules="[{ required: true, message: '回调RUL不能为空',trigger: 'change'}]"
                  >
                    <el-input type="textarea" v-model="v.url" style="width:300px"></el-input>
                    <i class="el-icon-circle-plus ft16" @click="addChildCall(item.childCallList)"></i>
                    <i class="el-icon-remove ft16" @click="rmChildCall(v,i)"></i>
                  </el-form-item>

                  <el-form-item label="是否开启" prop="resource">
                    <el-radio-group v-model="ruleForm.resource">
                      <el-radio :label="1">是</el-radio>
                      <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="btn-box">
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">取消</el-button>
        </div>
      </el-form>
    </div>
    <i class="el-icon-circle-plus icon_add" @click="addCall"></i>
  </div>
</template>

<script>
import api from "@/api/api";
export default {
  data() {
    return {
      ruleForm: {
        name: "",
        region: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        isChildback: "0",
        status: "0",

        appkey: "",
        appid: "",
        cname: "",
        callback_name: "",
        percentage: "",
        url: "",
        channel_id_one: "",
        channelist: [],
        callList: [{ isChildback: "0", status: "0", childCallList: [{}] }]
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" }
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change"
          }
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" }
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }]
      }
    };
  },
  mounted() {
    // this.addChannel();
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    removeChannel(item, index) {
      this.$confirm("此操作将删除回调名称, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(() => {
          console.log(item);
          if (item.isNew) {
            this.channelForm.channelist.splice(index, 1);
          } else {
            item.status = 2;
          }
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    /**
      @Param isNew true:新增加的，并非从服务端获取
     */
    addChannelBase(name, status, url, id, percentage, isNew) {
      this.ruleForm.channelist.push({
        callback_name: name,
        status: status,
        url: url,
        id: id,
        percentage: percentage,
        isNew: isNew
      });
    },
    addChannelVal(name, status, url, id, percentage) {
      this.addChannelBase(name, status, url, id, percentage, false);
    },
    addChildCall(childCallList) {
      childCallList.push({});
      // this.addChannelVal("", 0, "", "", "", true);
    },
    addCall() {
      this.ruleForm.callList.push({
        isChildback: "0",
        status: "0",
        childCallList: [{}]
      });
    }
  }
};
</script>
 
<style lang="scss" rel="stylesheet/scss" scoped>
.ui-add {
  padding: 10px 100px;
  margin: 0 auto;
  max-width: 1000px;
}
.panel-body {
  background: #f2f4f8;
  border: 1px solid #dce2ea;
  padding: 0;
}
.panel-body {
  .bg-purple {
    padding: 20px 20px 0 20px;
    border-bottom: 1px solid #dce2ea;
  }
}
.ui-bread_box {
  padding: 15px 0;
  font-size: 16px;
  color: #000;
  font-weight: 500;
}
.form-add {
  padding-top: 20px;
  border-bottom: 1px solid #dce2ea;
  overflow: hidden;
  background: #fff;
}
.form-add-left {
  width: 50%;
  display: inline-block;
  float: left;
  // border-right: 1px solid #cdcdcd;
  .el-form-item {
    display: inline-block;
  }
}
.btn-box {
  text-align: center;
  padding: 20px;
}
.icon_add {
  position: absolute;
  right: 145px;
  top: 40%;
  font-size: 35px;
  cursor: pointer;
  color: #339eff;
}
.form-add-item {
  border: 1px solid #cdcdcd;
  margin: 0 20px 20px;
  padding-top: 20px;
}
.ft16 {
  font-size: 20px;
  cursor: pointer;
  color: #339eff;
}
.form-add-title {
  font-size: 14px;
  margin-bottom: 20px;
  text-align: center;
}
</style>